<template>
    <div id="ClassStudentManage">
       <table class="table">
           <tbody>
               <tr>
                   <td>
                        <el-select @click.native="loadAllClassByCampusId" v-model="classId" placeholder="搜索班级">
                            <el-option  v-for="(item,key) in classList" :key="key" :label="item.className" :value="item.id"></el-option>
                        </el-select>                       
                   </td>
                   <td>
                       <el-input style="width:100%" prefix-icon="el-icon-search" placeholder="姓名"
                       @focus="clearAnotherInput('student.name')" v-model="searchData['student.name']"
                       clearable
                       ></el-input>
                   </td>
                   <td>
                       <el-input style="width:100%" prefix-icon="el-icon-search" placeholder="电话" 
                       v-model="searchData['student.mobile']"
                       @focus="clearAnotherInput('student.mobile')"
                       clearable
                       ></el-input>
                   </td>

                    <td>
                        <el-button type="primary"  prefix-icon="el-icon-date" @click="search(searchData,baseURL)">查询</el-button>
                        <el-button type="success"  prefix-icon="el-icon-date" @click="clearAnotherInput(),classId=''">全部</el-button>
                    </td>
               </tr>
           </tbody>
       </table>

     <table class="table table-bordered">
           <tbody>
               <tr>
                    <td>班级</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>电话</td>
                    <td>学历</td>
                    <td>学分</td>
                    <td>操作</td>
               </tr>
               <tr v-for="(item,key) in dataSource" :key="key">
                   <td>
                        {{convertClassName(item.classId )}}
                   </td>
                   <td>
                       {{item.name}}
                   </td>
                   <td>
                       {{item.gender?'男':'女'}}
                   </td>
                   <td>
                       {{item.age}}
                   </td>
                   <td>
                       {{item.mobile}}
                   </td>
                   <td>
                       {{item.education}}
                   </td>
                   <td>
                       {{item.credit}}
                   </td>
                    <td>
                        <el-button size="mini" type="primary" @click="followStudent(item)">跟踪</el-button>
                    </td>
               </tr>
           </tbody>
       </table>
       <el-pagination
        background
        layout="prev, pager, next"
        :page-size = pgSize
        :total="totalRecord"
        :current-page = 'currentPage'
        @current-change="loadNext"
        >
        </el-pagination>
    </div>
</template>
<script>
import cityCampusMixin from '@/Mixins/cityCampusMixin'
export default {
    mixins: [cityCampusMixin],
    data(){
        return {
            searchData: {
                'student.name': ''
            },
            baseURL: window.baseURL + "/backstage/classStudent/findByPage?token="+this.$token+'&',
            className: '',
            totalRecord: 1,
            studentInfos: [],
            currentPage: 1,
        }
    },
    methods: {
        pushToaddNewStudent(){
            this.$router.push({name:'AddNewStudent'})
        },

         loadNext(pageNum){
            var url ;
            this.currentPage = pageNum;
            var isAllEmpty =  this.isAllEmpty(this.searchData);
            if(!isAllEmpty){
                if(this.searchData['student.name']){
                    url = this.baseURL+'student.name='+this.searchData['student.name']
                }
                if(this.searchData['student.mobile']){
                    url = this.baseURL+'student.mobile='+this.searchData['student.mobile']
                }
            }else{
                url = window.baseURL + "/backstage/classStudent/findByPage?token="+this.$token+"&classId="+this.classId;
            }
            url = url+"&pageSize=5&pageNum="+pageNum;
            // var searcUrl = window.baseURL + "/backstage/classStudent/findByPage?token="+this.$token+"&student.name="+this.searchData.sname;
             this.$http.get(url)
            .then((response)=>{
                this.dataSource = response.data.data.list.results;
                this.totalRecord = response.data.data.list.totalRecord;
            })
            .catch((error)=>{
            })
        },
       
        followStudent(student){
            //存储当前选中的学生信息
            localStorage.setItem('currentStudent',JSON.stringify(student));
            // 跳转到跟踪详情页面
            this.$router.push({name:'FollowStudentInfo'});
        },
        loadData(pageNum){
            var url = window.baseURL + "/backstage/classStudent/findByPage?token="+this.$token+"&pageSize="+this.pgSize+"&pageNum="+pageNum;
            this.$http.get(url)
            .then((response)=>{
                this.dataSource = response.data.data.list.results;
                this.totalRecord = response.data.data.list.totalRecord;
            })
            .catch((error)=>{
            })
        }
    },
   watch: {
       classId(value){
            var url = window.baseURL + "/backstage/classStudent/findByPage?token="+this.$token+"&pageSize="+this.pgSize+"&pageNum=1&classId="+value;
            this.$http.get(url)
            .then((response)=>{
                this.dataSource = response.data.data.list.results;
                this.totalRecord = response.data.data.list.totalRecord;
                this.currentPage = 1;
            })
            .catch((error)=>{
            })
       }
   },
    created(){
        this.loadAllClassByCampusId();
        this.loadData(1);
    }
}
</script>
<style lang="scss" scoped>
    #ClassStudentManage {
        width: 100%;
        height: 100%;
        padding: 40px;
        position: absolute;
    }
</style>
